<template>
  <div>
    <!-- 查询 -->
    <div>
      <el-input placeholder="请输入护理项目名称" style="width:200px" v-model="queryNursingName"></el-input>
      <el-button @click="queryByNursingName" type="success" plain>查询</el-button>
      <el-button @click="showAddContentDialog" type="primary" style="width: 100px; margin-left: 50px;font-weight: bolder; font-size: 16px">
        新增
      </el-button>
    </div>
    <!-- 显示所有护理项目信息 -->
    <div>{{errorMessage}}</div>
    <el-table :data="nurseContentList">
      <el-table-column label="序号" type="index" width="60px"></el-table-column>
      <el-table-column prop="id" label="ID" width="80px"></el-table-column>
      <el-table-column prop="serialNumber" label="编号" width="120px"></el-table-column>
      <el-table-column prop="nursingName" label="护理项目名称" width="120px"></el-table-column>
      <el-table-column prop="servicePrice" label="价格" width="120px"></el-table-column>
      <el-table-column prop="message" label="描述" width="120px"></el-table-column>
      <el-table-column prop="status" label="状态" width="120px">
        <template #default="scope">
          {{ getStatusName(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column prop="executionCycle" label="执行周期" width="120px"></el-table-column>
      <el-table-column prop="executionTimes" label="执行次数" width="120px"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="showEditContentDialog(scope.row.id)">修改</el-button>
          <el-button type="danger" @click="removeContent(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="example-pagination-block">
      <el-pagination
          v-model:current-page="pageContains.pageNum"
          v-model:page-size="pageContains.pageSize"
          :page-sizes="[10,20,30,50,100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageContains.total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>

    <!-- 护理项目信息对话框 -->
    <el-dialog v-model="nurseContentDialog" :title="dialogTitle">
      <el-form :model="curNurseContent">
        <el-form-item label="编号">
          <el-col :span="11">
            <el-input v-model="curNurseContent.serialNumber"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="护理项目名称">
          <el-col :span="11">
            <el-input v-model="curNurseContent.nursingName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="价格">
          <el-col :span="11">
            <el-input v-model="curNurseContent.servicePrice"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="描述">
          <el-col :span="11">
            <el-input v-model="curNurseContent.message"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="状态">
          <el-col :span="11">
            <el-select v-model="curNurseContent.status">
              <el-option label="启用" value="1"></el-option>
              <el-option label="停用" value="2"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="执行周期">
          <el-col :span="11">
            <el-input v-model="curNurseContent.executionCycle"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="执行次数">
          <el-col :span="11">
            <el-input v-model="curNurseContent.executionTimes"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <el-button @click="optContent()">{{buttonOpt}}</el-button>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import http from '@/axios/http';

let nurseContentList = ref([]);
let errorMessage = ref("");
let queryNursingName = ref("");
let nurseContentDialog = ref(false);
let curNurseContent = ref({});
let dialogTitle = reactive("");
let buttonOpt = reactive("");
let dialogOptType = reactive(1);
let pageContains = reactive({ pageNum: 1, pageSize: 10, total: 0 });

function queryByNursingName() {
  let param = {
    nursingName: queryNursingName.value
  };
  http.post('/lyy/get_contents_by_name', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          nurseContentList.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  ).catch((error) => {
    console.error("查询失败:", error);
    errorMessage.value = "查询失败，请检查输入或联系管理员";
  });
}

function showAddContentDialog() {
  dialogTitle = "新增护理项目";
  buttonOpt = "新增";
  nurseContentDialog.value = true;
  dialogOptType = 1;
}

function showEditContentDialog(contentId) {
  getContentInfo(contentId);
  dialogTitle = "修改护理项目";
  buttonOpt = "修改";
  nurseContentDialog.value = true;
  dialogOptType = 2;
}

function getContentInfo(contentId) {
  let param = {
    id: contentId
  };
  http.post('/lyy/get_content_by_id', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          curNurseContent.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function addContent() {
  let param = curNurseContent.value;
  http.post('/lyy/add_content', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          nurseContentDialog.value = false;
          getAllContents();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function editContent() {
  let param = curNurseContent.value;
  http.post('/lyy/modify_content', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          nurseContentDialog.value = false;
          getAllContents();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function optContent() {
  if (dialogOptType === 1) {
    addContent();
  } else if (dialogOptType === 2) {
    editContent();
  }
}

function removeContent(contentId) {
  let param = {
    id: contentId
  };
  http.post('/lyy/remove_content', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          getAllContents();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function getAllContents() {
  http.post('/lyy/get_all_contents').then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          nurseContentList.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function getStatusName(status) {
  return status === 1 ? '启用' : '停用';
}

onMounted(() => {
  getAllContents();
});
</script>